{% extends "base.html" %}

{% block title %}Create User - Flask Database Demo{% endblock %}

{% block content %}
<h2>Create New User</h2>

<div class="row">
    <div class="col-md-6">
        <form method="POST">
            <div class="mb-3">
                <label for="username" class="form-label">Username</label>
                <input type="text" class="form-control" id="username" name="username" 
                       value="{{ request.form.get('username', '') }}" required>
                {% if errors and errors.username %}
                    <div class="text-danger">{{ errors.username }}</div>
                {% endif %}
            </div>
            
            <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" name="email" 
                       value="{{ request.form.get('email', '') }}" required>
                {% if errors and errors.email %}
                    <div class="text-danger">{{ errors.email }}</div>
                {% endif %}
            </div>
            
            <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <input type="password" class="form-control" id="password" name="password" required>
                {% if errors and errors.password %}
                    <div class="text-danger">{{ errors.password }}</div>
                {% endif %}
            </div>
            
            <button type="submit" class="btn btn-primary">Create User</button>
            <a href="{{ url_for('users') }}" class="btn btn-secondary">Cancel</a>
        </form>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5>User Creation Guidelines</h5>
            </div>
            <div class="card-body">
                <p>When creating a new user, ensure:</p>
                <ul>
                    <li>Username is unique and between 3-20 characters</li>
                    <li>Email is valid and unique</li>
                    <li>Password is at least 6 characters long</li>
                </ul>
                <p>This form demonstrates:</p>
                <ul>
                    <li>Form validation before database insertion</li>
                    <li>Error handling and user feedback</li>
                    <li>Creating new records with SQLAlchemy</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}